import React, {Component} from 'react';
import {
    base,
    toast
} from 'nc-lightapp-front';
import './index.less';

const {NCCheckbox} = base;

class TotaltypeRefer extends Component {
    constructor(props) {
        super(props);
        this.state = {
            age: props.val.age || false,
            edu: props.val.edu || false,
            jobrank: props.val.jobrank || false,
            entrydimi: props.val.entrydimi || false,
            change: props.val.change || false
        };
    }
    componentWillReceiveProps(nextProps, nextContext) {
        let nextVal = JSON.stringify(nextProps.val);
        let thisVal = JSON.stringify(this.props.val);
        if(nextVal !== thisVal){
            this.setState({
                age: nextProps.val.age || false,
                edu: nextProps.val.edu || false,
                jobrank: nextProps.val.jobrank || false,
                entrydimi: nextProps.val.entrydimi || false,
                change: nextProps.val.change || false,
            })
        }
    }

    ageChange = (val) => {
        this.setState({
            age: val
        }, () => {
            this.changed();
        })
    };

    eduChange = (val) => {
        this.setState({
            edu: val
        }, () => {
            this.changed();
        })
    };

    jobrankChange = (val) => {
        this.setState({
            jobrank: val
        }, () => {
            this.changed();
        })
    };

    changed = () => {
        let val = [];
        if(this.props.isFlow){
            val.push({'entrydimi': this.state.entrydimi});
            val.push({'change': this.state.change});
        }else{
            val.push({'jobrank': this.state.jobrank});
            val.push({'age': this.state.age});
            val.push({'edu': this.state.edu});
        }
        // 检测数组 val 的所有元素是否都为 false
        let allFalse = val.every(item => {
            return !(item.jobrank || item.age || item.edu || item.entrydimi || item.change)
        });
        if (allFalse) {
            toast({
                color: 'danger',
                content: this.props.language["gx6008-000189"]//请选择分析维度！
            })
        }
        this.props.onChange(val);
    };

    flowChange = (key, val) => {
        this.setState({
            [key]: val
        }, () => {
            this.changed();
        })
    };

    render() {
        const {language, isFlow = false} = this.props;
        return <div className={'refer-item'}>
            <span className={'refer-label'}>{language["gx6008-000186"]}</span>
            <If condition={isFlow}>
                <div className={'checkbox-flow'}>
                    {/*入离职趋势*/}
                    <NCCheckbox colors="info"
                                onChange={(val) => {
                                    this.flowChange('entrydimi', val)
                                }
                                }
                                checked={this.state.entrydimi}
                    >
                        {language['gx6008-000181']}
                    </NCCheckbox>
                    {/*人员变动*/}
                    <NCCheckbox colors="info"
                                onChange={(val) => {
                                    this.flowChange('change', val)
                                }
                                }
                                checked={this.state.change}
                    >
                        {language['gx6008-000188']}
                    </NCCheckbox>
                </div>
                <Else/>
                <div className={'checkbox-box'}>
                    {/*年龄*/}
                    <NCCheckbox colors="info"
                                onChange={this.ageChange}
                                checked={this.state.age}
                    >
                        {language['gx6008-000138']}
                    </NCCheckbox>
                    {/*学历*/}
                    <NCCheckbox
                        checked={this.state.edu}
                        onChange={this.eduChange}
                    >
                        {language['gx6008-000139']}
                    </NCCheckbox>
                    {/*职级*/}
                    <NCCheckbox
                        checked={this.state.jobrank}
                        onChange={this.jobrankChange}
                    >
                        {language['gx6008-000185']}
                    </NCCheckbox>
                </div>
            </If>


        </div>
    }
}

export default TotaltypeRefer;